<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { CouponType, UseCouponType } from '@/enum/coupon'
import useTable from '@/hooks/useTable'

const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { formatColumns } = useTable()
const searchQuery = reactive({
  couponId: props.id,
})
const formRef = ref()
const actionRef = ref()
const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/coupon/user/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const columns = formatColumns([
  { width: 90, title: '用户头像', dataIndex: 'userAvatar', valueType: 'image' },
  { width: 200, title: '用户昵称', dataIndex: 'userNickName', hideInSearch: false },
  { width: 200, title: '手机号码', dataIndex: 'userMobile', hideInSearch: false },
  { title: '优惠券金额', dataIndex: 'money', width: 130 },
  {
    title: '状态',
    dataIndex: 'status',
    width: 130,
    valueEnum: {
      0: {
        text: '未使用',
        status: 'Default',
      },
      1: {
        text: '已使用',
        status: 'Success',
      },
      2: {
        text: '已失效',
        status: 'Error',
      },
    },
  },
  {
    title: '领取方式',
    dataIndex: 'type',
    width: 130,
    hideInSearch: false,
    valueEnum: {
      [CouponType.手动领取]: { text: '手动领取' },
      [CouponType.赠送券]: { text: '赠送券' },
    },
  },
  { title: '可用时间段/天数', dataIndex: 'time', width: 250 },
])
</script>
<template>
  <CModal v-model:visible="props.show" width="1200px" :footer="false" title="领取记录" @cancel="emit('update:show', false)">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #time="{ record }">
        {{ record.day ? record.day + '天' : `${record.beginTime} ~ ${record.endTime}` }}
      </template>
    </ProTable>
  </CModal>
</template>
<style lang="less" scoped></style>
